<template>
	<view class="content">
		<!-- <view class="title">
			<text>Radio用法写法</text>
		</view> -->
		<u-navbar title="兑换会员期"
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view class="radioInfo">
			<view class="dataInfo">
				<!-- 列表内容开始 -->
				<radio-group @change="radioChange">
					<view class="dataList" v-for="(item,index) in dataList" :key='index'
						@click="listClick(item.titleId)" :class="index === radioCurrent?'radiOn':''">
						<view class="textImg">
							<view class="img">
								<image :src="item.imgUrl" mode="widthFix"></image>
							</view>
							<view class="text"> 
								<text>{{item.title}}</text>
								<text>{{item.url}}</text>
							</view>
						</view>
						<view class="radioBox">
							<radio color="#2DCF8C" :value="item.titleId + ''" :checked="index === radioCurrent" />
						</view>
					</view>
				</radio-group>
				<!-- 列表内容结束 -->
			</view>
		</view>
		
		<button @tap="getVal">兑换</button>
	</view>
</template>
<script>
	export default {
			data() {
				return {
					dataList: 
					[{
						imgUrl: 'https://www.yplm888.com/uploads/20230208/70b307ba48ee8d4bdb82699066d2e685.jpg',
						title: '一个月会员期',
						url: '30天会员（1500券）',
						titleId: 1
					}, {
						imgUrl: 'https://www.yplm888.com/uploads/20230208/70b307ba48ee8d4bdb82699066d2e685.jpg',
						title: '两个月会员期',
						url: '60天会员（3000券）',
						titleId: 2
					}, {
						imgUrl: 'https://www.yplm888.com/uploads/20230208/70b307ba48ee8d4bdb82699066d2e685.jpg',
						title: '三个月会员期',
						url: '90天会员（4500券）',
						titleId: 3
					}],
					radioCurrent: null,
					dataFrom: {
						titleId: null //传的id
					}
				}
			},
			methods: {
				getVal(){
					//获取选中的值
					let data = this.dataFrom
					this.$u.api.exchange(data).then(res => {
						this.$u.toast(res.msg)
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							},1000)
					
						}
					})
					
				},
				radioChange(evt) { //单个选择框点击
					
					this.dataFrom.titleId = parseInt(evt.detail.value) //如果需要通过点击来知道选择的是哪个商品的id
					for (let i = 0; i < this.dataList.length; i++) {
						if (this.dataList[i].titleId === evt.target.titleId) {
							this.radioCurrent = i;
							break;
						}
					}
				},
				/* 整块点击 */
				listClick(titleId) { //整个数据点击
					
					this.dataFrom.titleId = titleId //如果需要通过点击来知道选择的是哪个商品的id
					for (let i = 0; i < this.dataList.length; i++) {
						if (this.dataList[i].titleId == titleId) {
							this.radioCurrent = i;
							break;
						}
					}
				}
			}
		}
</script>


<style lang="scss">
	.content {
			.title {
				text-align: center;
				padding: 30rpx 0;
	 
				text {
					color: #dedede;
					font-size: 55rpx;
					text-align: center;
					letter-spacing: 6rpx;
					text-shadow: 2rpx 2rpx 8rpx #000;
					opacity: .32;
				}
			}
	 
			.radioInfo {
				.dataInfo {
					width: 90%;
					margin: 0 auto;
	 
					.checkAll {
						display: flex;
						justify-content: space-between;
					}
	 
					.radiOn {
						border: 1px solid #2DCF8C !important;
					}
	 
					.dataList {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border: 1px solid #E7E9EE;
						padding: 20rpx;
						margin-bottom: 20rpx;
	 
						.textImg {
							display: flex;
							align-items: center;
	 
							.img {
								border: 1px solid #E7E9EE;
								padding: 10rpx;
	 
								image {
									width: 90rpx;
									height: 90rpx;
									display: block;
								}
							}
	 
							.text {
								padding-left: 20rpx;
	 
								text {
									display: block;
									font-size: 30rpx;
									color: #000;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
</style>
